<template>
  <div @click="$emit('search-data', searchResults)">
    <div class="searchBox">
      <div class="searchleft" @click="$router.back()">
        <van-icon name="arrow-left" />
      </div>
      <div class="searchContent">
        <div class="searchLogo">
          <van-icon name="search" />
        </div>
        <input
          type="text"
          placeholder="请输入搜索关键词"
          v-model="keywords"
          @keyup.enter="EventSea(keywords)"
        />
        <div class="delbtn">
          <img
            @click="delVal"
            v-show="keywords"
            src=""
            alt=""
          />
        </div>
      </div>
    </div>
    <div class="hotsBox" v-show="hotTemp">
      <h3>热门搜索</h3>
      <div class="hsea">
        <div
          class="hotsealis"
          @click="EventSea(hotSe.title)"
          v-for="(hotSe, index) in hotlist"
          :key="index"
        >
          <p v-if="index<3" style="color:red;border-left: 1rem solid red;border-radius: 5rem; padding: 2rem 5rem;border-right: 1rem solid red; ">{{ hotSe.title }}</p>
          <p v-if="index>=3" >{{ hotSe.title }}</p>
        </div>
      </div>

      <!-- 历史记录 -->
      <ul>
        <li
          v-for="item in historyList"
          :key="item.id"
          @click="EventSea(item.storyName)"
        >
          <div class="leftimg">
            <van-icon name="underway-o" />
          </div>
          <div class="rightli">
            <div class="rightName">{{ item.storyName }}</div>
            <span @click="deleHislit(item.id)"
              ><van-icon name="cross" /></span>
          </div>
        </li>
      </ul>
    </div>
    <div class="bestMatch" v-if="isbest">
      <h3>搜索结果</h3>
      <SearchMenu v-for="(seaitem,index) in searchmenu" :key="index" :seaitem="seaitem" ></SearchMenu>
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { Icon } from 'vant';

Vue.use(Icon);
import SearchMenu from '@/zujian/SearchMenu.vue'
// import SingerSheet from '@/components/SingerSheet.vue'
export default {
  components: {
    SearchMenu,
    // SingerSheet
  },
  props: ["songId"],
  data() {
    return {
      hotlist: [],
      keywords: "",
      searchmenu:[],
      hotTemp: true, //热门搜索
      historyList: JSON.parse(window.localStorage.getItem("historyList")) || [], //历史搜索记录，存本地
      searchResults: [], //音乐列表
      searchMultimatcResults: null, //歌手歌单
      isbest: false, //搜索列表
    };
  },
  created() {
    this.axios
      .get("https://apis.netstart.cn/douguo/recipe/search/hot")
      .then((res) => {
        this.hotlist = res.data.result.suggestdetails;
        // console.log(this.hotlist);
      });
  },
  methods: {
    delVal() {
      //点击删除时
      this.keywords = "";
      this.hotTemp = true;
      this.isbest = false;
    },
    EventSea(keywords) {
      //input点击回车事件时
      if (keywords == false) {
        return alert("输入的歌曲不能为空");
      }
      this.hotTemp = false;
      this.isbest = true;
      this.keywords = keywords;
      // console.log(this.historyList);
      this.axios
        .get(`https://apis.netstart.cn/douguo/recipe/search?keyword="${keywords}"`)
        .then((res) => {
          this.searchmenu=res.data.result.list
          console.log(this.searchmenu);
        });
      this.historyList = [
        ...this.historyList,
        {
          id: Date.now(),
          storyName: this.keywords,
        },
      ].reverse();
    },

    deleHislit(id) {
      //删除历史记录当前项
      this.historyList = this.historyList.filter((o) => o.id !== id);
    },
  },
  watch: {
    keywords: function (keywords, oldValue) {
      // console.log(keywords);
      oldValue; //预留实时搜索提示
    },
    historyList: function (newHis) {
      // console.log(newHis);
      window.localStorage.setItem("historyList", JSON.stringify(newHis));
    },
  },
};
</script>

<style lang="scss" scoped>
div h3 {
  font-size: 12px;
  line-height: 12px;
  color: #666;
  padding: 15px 10px 0;
}

.searchBox {
  padding: 15px 10px;
  height: 60px;
  box-sizing: border-box;
  border-bottom: 1px solid #dfdcdc;
  display: flex;
  align-items: center;
  .searchleft{
    font-size: 20rem;
    color: #484848;
  }

  .searchContent {
    display: flex;
    height: 30px;
    width: 100%;
    background: #ccc;
    border-radius: 20px;

    .searchLogo {
      margin: 0 8px;
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        width: 13px;
        height: 13px;
      }
    }

    input {
      flex: 1;
      border: none;
      outline: none;
      color: #333;
      background: #ccc;
    }

    input::-webkit-input-placeholder {
      color: #c9c9c9;
    }

    .delbtn {
      margin: 8px;

      img {
        width: 14px;
      }
    }
  }
}

.hotsBox {
  h3 {
    font-size: 14rem;
    font-weight: bold;
    margin: 10rem 15rem;
  }
  .hsea {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    .hotsealis {
      margin: 5rem 3rem;
      background-color: #f5f5f5;
      border-radius: 3rem;
      padding: 4rem 10rem;
    }
  }

  ul {
    display: block;
    list-style-type: disc;
    // margin-block-start: 1em;
    margin-block-end: 1em;
    padding: 0px 0px 10px 10px;
    list-style: none;
    display: flex;
    flex-direction: column;

    // align-items: center;
    li {
      box-sizing: border-box;
      height: 45px;
      align-items: center;
      display: flex;
      font-size: 14px;
      color: #333;

      .leftimg {
        width: 25px;
        height: 25px;
        display: flex;
        align-items: center;

        img {
          width: 15px;
          display: block;
        }
      }

      .rightli {
        display: flex;
        flex: 1;
        align-items: center;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);

        span {
          width: 32px;
          height: 32px;
          display: flex;
          align-items: center;
          margin-left: auto;

          img {
            width: 12px;
            display: block;
          }
        }
      }
    }
  }
}
</style>
